<template>
  <div class="tabs">
    <div v-for="(item,i) in tabs" :class="[itemKey ==i ?'onItem tabItem':'tabItem']" @click="onItem(i)" > {{item}}  </div>
  </div>
</template>

<script>
export default {
  name: "ButtonTab",
  data(){
    return {
      itemKey:0
    }
  },
  props:['tabs'],
  methods:{
    onItem(i){
      this.itemKey = i
      this.$emit('itemKey',i)  //触发自定义事件
    }
  }
}
</script>

<style scoped>
.tabs {
  display: flex;
}
.tabItem {
  margin-right: 10px;
  padding: 5px 15px;
  opacity: 1;
  border-radius: 55px;
  background: rgba(241, 243, 245, 1)
}

.onItem{
  color: #fff;
  background: rgba(76, 110, 245, 1);
  box-shadow: 0px 4px 10px  rgba(76, 110, 245, 0.37)
}
</style>